<template>
  <div class="home">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item class="my-image" v-for="v in banner" :key="v.id">
        <img :src="v.imageUrl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <ul class="nav">
      <li>
        <span
          ><van-icon name="calendar-o" size="26" color="red" @click="godaily"
        /></span>
        <router-link class="tags" to="/daily"> 每日推荐</router-link>
      </li>
      <li>
        <span
          ><van-icon name="service-o" size="26" color="red" @click="gofm"
        /></span>
        <router-link class="tags" to="/fm">私人FM</router-link>
      </li>
      <li>
        <span
          ><van-icon
            name="description"
            size="26"
            color="red"
            @click="gosonglistsground"
        /></span>
        <router-link class="tags" to="/songsheet">歌单</router-link>
      </li>
      <li>
        <span
          ><van-icon name="bar-chart-o" size="26" color="red" @click="gorank"
        /></span>
        <router-link class="tags" to="/rank"> 排行榜</router-link>
      </li>
    </ul>

    <div class="songbox">
      <p>
        推荐歌单
        <span class="morekuai"
          >更多
          <van-icon
            name="arrow"
            class="more"
            size="16"
            @click="gosonglistsground"
          />
        </span>
      </p>
      <div class="songlist">
        <div class="songimgbox" v-for="item in songlist" :key="item.id">
          <div class="songtag">
            <img
              :src="item.picUrl"
              :title="item.name"
              @click="gosongListDetail(item.id)"
            />
            <span class="songsheetplay"
              ><van-icon name="play" />{{
                (item.playCount / 10000).toFixed(1) + "万"
              }}</span
            >
          </div>
          <p>{{ item.name }}</p>
        </div>
      </div>
    </div>
    <div class="newsong">
      <p>
        新歌速递
        <span class="morekuai" @click="godaily">
          <van-icon name="play" class="more" size="16" />播放</span
        >
      </p>
      <ul>
        <li
          v-for="(item, i) in newsong"
          :key="item.id"
          @click="
            gosongDetail(item.id);
            change(i);
          "
        >
          <img :src="item.picUrl" alt="" />
          <div class="lists">
            <span class="songname">{{ item.name }}</span>
            <span class="singer" v-for="v in item.song.artists" :key="v.id"
              >- {{ v.name }}</span
            >
          </div>
          <van-icon name="play-circle-o" size="21" color="#B3B3B3" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { reqBannerAPI, RecommendAPI, NewsongAPI } from "@/api/home.js";
// import axios from "axios";
export default {
  data() {
    return {
      banner: [],
      songlist: [],
      newsong: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    change(i) {
      document.querySelectorAll(".newsong li")[i].style.background = "#e9e9e9";
    },
    //轮播图
    async getBanner() {
      const result = await reqBannerAPI();
      /* console.log(result); */
      this.banner = result.data.banners;
    },
    //推荐歌单
    async getRecommend() {
      const result = await RecommendAPI();
      console.log("推荐歌单", result);
      /* console.log(result.data.result); */
      this.songlist = result.data.result;
    },
    //点击跳转歌单详情
    gosongListDetail(id) {
      this.$router.push(`/songlistdetail/${id}`);
    },
    //推荐新音乐
    async getNewsong() {
      const result = await NewsongAPI();
      console.log("新音乐", result);
      /* console.log(result.data.result); */
      this.newsong = result.data.result;
    },
    //点击跳转歌曲详情
    gosongDetail(id) {
      this.$router.push(`/songdetail/${id}`);
    },
    //更多跳转每日推荐
    godaily() {
      this.$router.push("/daily");
    },
    //更多跳转歌单广场
    gosonglistsground() {
      this.$router.push("/songsheet");
    },
    //点击跳转私人FM
    gofm() {
      this.$router.push("/fm");
    },
    //点击跳转排行榜
    gorank() {
      this.$router.push("/rank");
    },
  },
  created() {
    this.getBanner();
    this.getRecommend();
    this.getNewsong();

    // this.$http
    //   .get("http://localhost:3000/hot/topic?limit=30&offset=30", {
    //     withCredentials: true,
    //   })
    //   .then((res) => {
    //     console.log(111, res);
    //   });
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.my-image {
  box-sizing: border-box;
  padding: 10px 10px 0 10px;
}

.nav {
  height: 100px;
  display: flex;
  margin-top: 10px;
  justify-content: space-around;
  align-items: center;
  border-bottom: 0.5px solid #e9e9e9;
  background-color: #fff;
}
.nav li {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
}
.nav span {
  display: inline-block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff1f1;
  text-align: center;
  line-height: 60px;
}
.tags {
  margin-top: 8px;
  color: #000;
}
.my-swipe img {
  width: 100%;
  height: 150px;
  border-radius: 10px;
}

img {
  width: 100px;
  height: 100px;
}

.more {
  float: right;
  color: #000;
  line-height: 24px;
}
.morekuai {
  font-size: 16px;
  float: right;
  box-sizing: border-box;
  border: 1px #e5e5e5 solid;
  text-align: center;
  line-height: 24px;
  padding: 1px 4px 1px 8px;
  border-radius: 20px;
}
.songimgbox {
  text-align: center;
  width: 100px;
  height: 100px;
  font-size: 12px;
  margin-left: 10px;
}
.songtag {
  width: 100px;
  height: 100px;
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.songsheetplay {
  display: inline-block;
  box-sizing: border-box;
  padding: 2px 7px 2px 3px;
  background-color: rgba(0, 0, 0, 0.329);
  border-radius: 20px;
  color: #fff;
  position: absolute;
  top: 3px;
  right: 3px;
  font-size: 12px;
}
.songimgbox p {
  width: 100px;
  margin-top: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.songlist {
  width: 100%;
  height: 140px;
  display: flex;
  overflow-x: scroll;
  margin-left: 8px;
  /* overflow-x: visible; */
}
.songbox {
  height: 185px;
  overflow: hidden;
  background-color: #fff;
  border-radius: 0 0 10px 10px;
}
.songbox > p {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-top: 10px;
  padding: 5px 12px 0 10px;
}
.songlist-webkit-scrollbar {
  width: 0;
}
.newsong {
  margin-top: 10px;
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 50px;
}
.newsong img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  vertical-align: middle;
}
.newsong li {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}
.lists {
  border-bottom: 0.5px solid #e9e9e9;
  box-sizing: border-box;
  display: inline-block;
  width: 260px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.songname {
  font-size: 16px;
  font-weight: bold;
  color: rgb(58, 58, 58);
  line-height: 71px;
}
.singer {
  font-size: 12px;
  color: #9a9a9a;
  margin-left: 10px;
}
.newsong > p {
  font-size: 18px;
  font-weight: 600;
  padding: 20px 12px 0 10px;
}
</style>
